<template>
  <div class="app-container">
    <custom-dialog class="custom-dialog"
      :visible="dialogVisible"
      v-if="dialogVisible && dialogName === 'log-dialog'"
      returnButtonName="返回"
      :callback="closeDialog"
    >
      <div slot="title">&nbsp;</div>
      <main-tain-log :productId="dialogProps.id"/>
    </custom-dialog>

    <tree-table
      :data="dataArray"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      :showList="showList"
      v-show="!dialogVisible"
      >
      <el-table-column label="产品端" align="center" prop="name">
        <template slot-scope="{row}">
          <div v-if="!row.children">
            {{'维护任务'+row.index}}
          </div>
          <div v-else>
            {{ row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="维护开始时间" align="center">
        <template slot-scope="{row}">
          <span v-if="!row.children">{{ row.startDate|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="维护结束时间" align="center">
        <template slot-scope="{row}">
          <span v-if="!row.children">{{row.endDate|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品端维护" align="center" prop="terminalMainTain">
        <template slot-scope="{row}">
          <span v-if="!row.children">{{row.status === 1&&row.maintenFlag ? '维护中' : row.status === 2&&row.maintenFlag?'待维护':'无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="游戏平台维护" align="center">
        <template slot-scope="{row}">
          <span v-if="!row.children">{{row.itemNameList ? row.itemNameList : '无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="游戏转账维护" align="center" prop="transferNameList">
        <template slot-scope="{row}">
          <span v-if="!row.children">{{row.transferNameList ? row.transferNameList : '无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="维护详情" align="center">
        <template slot-scope="{row}">
          <div v-if="!row.children">
            <el-tooltip class="item" effect="dark" placement="bottom-end">
              <div slot="content">
                <template v-if=" !row.status">
                  <p>当前维护时间：</p>
                  <p>无</p>
                  <p> 当前维护内容：</p>
                  <p>无</p>
                </template>
                <template v-else>
                  <p>当前维护时间：</p>
                  <p><span>{{row.startDate|parseTime}}</span>  - <span>{{row.endDate|parseTime}}</span> </p>
                  <p> 当前维护内容：</p>
                  <p>{{row.reason}}</p>
                </template>
              </div>
              <el-button>详情</el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="维护状态" align="center" prop="mainTainStatus">
        <template slot-scope="{row}">
          <span v-if="!row.children">
            {{row.status === 0 ?  '已过期' : (row.status === 1 ? '维护中' : '待维护')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="text" v-if="roleCheck(gameManageRoleType.edit)&&row.children"  @click="dialogFormVisible = true;dataRow=row">新增</el-button>
          <el-button type="text" v-if="roleCheck(gameManageRoleType.log)&&row.children"  @click.native="openDialog({props: row, dialogName: 'log-dialog'})">维护日志</el-button>
          <el-button type="text" v-if="roleCheck(gameManageRoleType.log)&& !row.children"  @click.native="deleteConfirm(row)">删除</el-button>
        </template>
      </el-table-column>
      </tree-table>

    <!--点击编辑的弹框-->
    <el-dialog title="添加维护设置" :visible.sync="dialogFormVisible" width="600px">
      <main-tain-setting   v-if='dialogFormVisible'
                           :dataRow="dataRow"
                           v-model="dialogFormVisible"
                           @getMaintainList="getListMaintainList"
                           @changeShowList="changeShowList"/>
    </el-dialog>
  </div>
</template>

<script>
import { grid, dialog, form } from '@/build';
import mainTainLog from './mainTainLog';
import {
  productPlatformListApi as platformMaintainList,
  gamePlatformMaintainUpdate as miantianUpdate,
} from '@/services/api/game';
import mainTainSetting from './mainTainSetting';
import { gameManageRoleType } from '@/router/gameRoutes';
import TreeTable from '@/components/TreeTable/index';

export default {
  mixins: [grid, dialog, form],
  components: {
    TreeTable,
    mainTainLog,
    mainTainSetting,
  },
  data() {
    return {
      gameManageRoleType,
      dataArray: [],
      dataRow: '',
      manual: true,
      showOrHide: false,
      dialogFormVisible: false,
      formLabelWidth: '100%',
      productId: '',
      deleteForm: undefined,
      showList: [
        {
          id: '1',
          show: false,
        },
        {
          id: '2',
          show: false,
        },
        {
          id: '3',
          show: false,
        },
        {
          id: '4',
          show: false,
        },
        {
          id: '5',
          show: false,
        },
        {
          id: '6',
          show: false,
        },
        {
          id: '7',
          show: false,
        },
        {
          id: '8',
          show: false,
        },
        {
          id: '9',
          show: false,
        },
      ],
    };
  },
  mounted() {
    this.bindGet(platformMaintainList, 'dataArray', {
      action: 'maintainList',
      format: (data) => {
        _.each(data, (item) => {
          item._expanded = _.find(this.showList, { id: item.id }).show;
          _.each(item.children, (subItem, index) => {
            subItem.index = index + 1;
          });
        });
        return data;
      },
    });
    this.bindSave(miantianUpdate, 'deleteForm', 'deleteForm', {
      afterSuccess: ([result]) => {
        if (result) {
          this.getListMaintainList();
        }
      },
    });
    this.getListMaintainList();
  },
  computed: {
  },
  methods: {
    deleteConfirm(row) {
      this.$confirm('确定要删除该维护任务？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteData(row);
      }).catch(() => {
      });
    },
    deleteData({ parentId, id }) {
      const parentRow = _.cloneDeep(_.find(this.dataArray, { id: parentId }));
      const index = _.findIndex(parentRow.children, o => o.id === id);
      parentRow.children.splice(index, 1);
      if (parentRow.children.length !== 0) {
        _.each(parentRow.children, (item) => {
          item.startDate = _.toTime(item.startDate);
          item.endDate = _.toTime(item.endDate);

          delete item._expanded;
          delete item._level;
          delete item._show;
          delete item.parent;
        });
      }

      this.deleteForm = parentRow;
      this.doSave({ action: 'deleteForm' });
    },
    changeShowList(id) {
      _.find(this.showList, { id }).show = true;
    },
    getListMaintainList() {
      this.doGet({ action: 'maintainList' });
    },
  },
};
</script>
<style scoped lang="scss" type="text/css">
  .el-col-2{
    text-align: center;
  }
  .custom-dialog{
    top: 0!important;
  }

</style>
